/* eslint-disable global-require */
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useEffect, useMemo } from 'react';
import { observer } from 'mobx-react-lite';
import img from '@/images/img.svg';
import './index.less';

interface Iprops{
  gitlabPipelineUrl:string,
}
const Index:React.FC<Iprops> = (props:Iprops) => {
  const { gitlabPipelineUrl } = props;
  const handleClick = () => {
    gitlabPipelineUrl && window.open(gitlabPipelineUrl);
  };
  const prefix = 'c7n-piplineManage-unrelated';
  // require是运行时加载模块 同步的
  const imgs = useMemo(() => require('@/images/img.svg'), []);
  return (
    <div className={prefix}>
      <div className={`${prefix}-img`} />
      <div className={`${prefix}-content`}>
        <p>流水线定义阶段以及任务未在当前系统定义，无法获取到此次执行的阶段信息 </p>
        <p>
          查看执行记录详情请
          <span className={`${prefix}-content-click`} onClick={handleClick}>【跳转至Gitlab】</span>
          进行操作
        </p>
        <p>若想在系统查看流水线运行详情，可将流水线任务在系统内进行编排</p>
      </div>
    </div>
  );
};
export default observer(Index);
